<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型</title>
		<style>
			div{
				/* div有宽没高 设置宽高 */
				width: 100px;
				height: 100px;
				border:1px solid red;
				/* 盒框模型：页面上任何一个元素都存在盒模型之中
				 组成：外边距+边框+内边距+内容
				 外边距：margin属性与border属性用法方向一致
				 语法：属性值1个代表4个方向：顺时针：上 右 下 左
				      属性值2个代表4个方向：顺时针：上下 右左
					  自适应居中：0 auto
					  属性值3个代表4个方向：顺时针：上 右左 下
					  属性值4个代表4个方向：顺时针：上 右 下 左
					  外边距-方向属性：
					  margin-left:数值px;
					  margin-right:数值px;
					  margin-top:数值px;
					  margin-bottom:数值px;
					   */
				 margin:100px;
				 margin: 10px 100px;
				 margin: 10px 20px 100px;
				 margin: 10px 20px 30px 100px;
				 /* 自适应居中 */
				 margin:0 auto;
				 /* 向下移动100个像素 */
				 margin-top:100px;
				 /* 内边距：paddiing属性与margin属性方法类似 
				 特点：边框与内容之间的距离
				 语法：属性值1个代表4个方向：顺时针：上 右 下 左
				      属性值2个代表4个方向：顺时针：上下 右左
				 					  
				      属性值3个代表4个方向：顺时针：上 右左 下
				 	  属性值4个代表4个方向：顺时针：上 右 下 左
				 */
				padding: 50px;
				padding: 50px 100px;
				padding: 50px 100px 200px;
				padding: 50px 100px 200px 300px;
				/* 内边距方向与外边距方向一致 */
				}
				.d4{
					width: 200px;
					height: 200px;
					border-top: 5px solid red;
					border-left:5px solid red ;
					border-radius: 50%;
					transform: rotate(228deg);
				}
				
			
		</style>
	</head>
	<body>
		<div></div>
		<div class="d4">
			
		</div>
	</body>
</html>